<template>
  <div class="qrcode_container">
    <section class="template container">
      <div class="block data-standby">
        <header>
          <span>数据准备</span>
          <div
            :class="{
              'mode-change': true,
              importer: mode === 'importer'
            }"
            @click="changeMode"
          />
        </header>
        <section>
          <div v-if="current_template.length == 0" class="empty-status">
            <empty>请先选择模板</empty>
          </div>
          <div v-else class="fill-in">vvv</div>
        </section>
      </div>
      <div class="block template-list"></div>
    </section>
    <section class="visual container" @click="cancelSelect">
      <QrTemplate ref="qr_template" @on-item-selected="onItemSelected">
        <component :is="'NameplateModule'"></component>
      </QrTemplate>
    </section>
    <section class="operation container">
      <span>操作容器</span>
      <StylesEditor
        v-if="isStyleEditShow"
        :style_settings="selectedModule"
        @onStyleChange="onStyleChange"
      ></StylesEditor>
    </section>
    <!-- <div class="test">
      <div ref="template1" class="template template1">
        <canvas ref="qrcode1"></canvas>
        <span>导出模板1</span>
      </div>
      <div ref="template2" class="template template2">
        <div class="message">
          <div v-for="item in message" :key="item.label" class="item">
            <span>{{ item.label }}: </span>
            <span>{{ item.value }}</span>
          </div>
        </div>
        <canvas ref="qrcode2"></canvas>
      </div>
      <div class="button-container">
        <el-button type="primary" size="mini" @click="exportTemplate">导出模板</el-button>
      </div>
    </div> -->
  </div>
</template>

<script lang="ts">
import Vue, { ComponentInstance } from 'vue'
import { Component, Ref } from 'vue-property-decorator'
import { toCanvas } from 'qrcode'
import html2canvas from 'html2canvas'
// 组件
import empty from '@/components/basic/empty.vue'
import QrTemplate from '@/components/tool/ws-qrcode-template.vue'
import StylesEditor from '@/components/tool/ws-styles-edit.vue'
import NameplateModule from './modules/nameplate.vue'
// 类型文件
import { SelectOptionsType } from '@/interface/ElementUI'
import { template_style, StyleListType } from './settings/qrcodeSettings'
// 自定义函数
import { deepClone } from '@/utils/specificFunc'
import { RGBToHEX } from '@/utils/color'
@Component({
  components: {
    empty,
    QrTemplate,
    StylesEditor,
    NameplateModule
  }
})
class QrCode extends Vue {
  @Ref() qr_template!: ComponentInstance
  @Ref() qrcode1!: HTMLCanvasElement
  @Ref() qrcode2!: HTMLCanvasElement
  @Ref() template1!: HTMLElement
  @Ref() template2!: HTMLElement
  // dataStandy
  mode: 'typewriter' | 'importer' = 'typewriter'
  current_template: string = ''
  message: SelectOptionsType<string> = [
    { label: '姓名', value: '用户1' },
    { label: '编号', value: '1234567' },
    { label: '部门', value: '生产部' },
    { label: '职位', value: '工程师' }
  ]
  qr_card_template: string = "'title qrcode' 'message qrcode'"
  selected_dom!: any
  selectedModule!: StyleListType
  isStyleEditShow: boolean = false
  mounted() {
    toCanvas(this.qrcode1, JSON.stringify(this.message), { width: 180 }, function (err) {
      if (err) console.error(err)
      console.log('success')
    })
    toCanvas(this.qrcode2, JSON.stringify(this.message), { width: 180 }, function (err) {
      if (err) console.error(err)
      console.log('success')
    })
  }
  generateScreenShotName() {
    return '截图-' + new Date().toLocaleString().replaceAll(/(\/)|(:)/g, '-') + '.jpg'
  }
  exportTemplate() {
    const domArr = [this.template1, this.template2]
    domArr.forEach(dom => {
      html2canvas(dom, {
        // 开启跨域配置
        useCORS: true,
        allowTaint: true
      }).then(canvas => {
        const src = canvas.toDataURL('image/jpeg', 1.0)
        // this.$refs.screenshot.src = imgData
        const filename = this.generateScreenShotName()
        // let src = canvas.toDataURL('image/png', 1)
        const image = new Image()
        image.src = src
        const url = image.src.replace(/^data:image\/[^;]/, 'data:application/octet-stream') // 输出类型
        const a = document.createElement('a') // 随便创建一个元素
        a.download = `${filename}.png` // 设置下载的文件名，默认是'下载'
        a.href = url
        document.body.appendChild(a)
        a.click()
        a.remove() // 下载之后把创建的元素删除
      })
    })
  }
  changeMode() {
    const cur_mode = this.mode
    this.mode = cur_mode === 'importer' ? 'typewriter' : 'importer'
  }
  onItemSelected(dom: any) {
    // const key = obj.item + '_style'
    // this.selectedModule = deepClone((this.cur_template as any)[key])
    // this.currentModuleName = key
    const style = window.getComputedStyle(dom, null)
    const tem = deepClone(template_style)
    Object.keys(tem).forEach((key: string) => {
      let style_value = (style as any)[key]
      if (key.indexOf('Color') !== -1) {
        style_value = RGBToHEX(style_value)
      }
      tem[key as keyof StyleListType] = style_value
    })
    if (style.backgroundColor === 'rgba(0, 0, 0, 0)') {
      tem.fill = ''
      tem.opacity = 1
    }
    this.selectedModule = deepClone(tem)
    this.selected_dom = dom
    this.isStyleEditShow = true
    this.$forceUpdate()
  }
  onStyleChange(style: StyleListType) {
    this.$broadEmit('dom_be_edited')
    Object.keys(style).forEach(key => {
      this.selected_dom.style[key] = style[key as keyof StyleListType]
    })
  }
  cancelSelect() {
    const dom: { selectedItem: string } = this.qr_template as any
    dom.selectedItem = ''
  }
}
export default QrCode
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.qrcode_container {
  position: relative;
  box-sizing: border-box;
  padding: 10px 20px;
  height: 100%;
  #flex-start(row, flex-start);
  #color(background-color, --primary-bg-color);
  .container {
    height: 100%;
    #color(color, --primary-text-color);
    #color(background-color, --module-bg-color);
  }
  .template {
    box-sizing: border-box;
    padding: 10px;
    width: 300px;
    #flex-start(column, flex-start);
    .block {
      box-sizing: border-box;
      padding: 10px;
      width: 100%;
      border: solid 1px;
      #color(border-color, --primary-border-color);
      #shadow-color(0, 0, 4px, 0, --primary-shadow-color);
    }
    .data-standby {
      margin-bottom: 10px;
      #flex-start(column, flex-start);
      header {
        box-sizing: border-box;
        padding-bottom: 5px;
        margin-bottom: 5px;
        width: 100%;
        border-bottom: solid 1px;
        #flex-center(row, center);
        justify-content: space-between;
        #color(border-color, --primary-border-color);
        .mode-change {
          box-sizing: border-box;
          position: relative;
          padding: 6px;
          height: 30px;
          width: 80px;
          border-radius: 5px;
          box-shadow: inset 0 0 4px #929292;
          transition: all 0.2s ease;
          cursor: pointer;
          #color(background-color, --lighter-text-color);
        }
        .mode-change::before {
          content: '手输';
          position: absolute;
          top: 12%;
          bottom: 12%;
          left: 5%;
          display: block;
          width: 40px;
          border-radius: 4px;
          font-size: 12px;
          transition: all 0.2s ease;
          #flex-center(row, center);
          #color(color, --primary-text-color);
          #color(background-color, --module-bg-color);
        }
        .importer::before {
          content: '导入';
          left: 100%;
          transform: translateX(-112%);
        }
      }
      section {
        width: 100%;
        min-height: 200px;
        .empty-status {
          transform: scale(0.8);
          /deep/.empty-box {
            span {
              #color(color, --primary-text-color);
            }
          }
        }
      }
    }
    .template-list {
      flex: 1;
    }
  }
  .visual {
    flex: 1;
    position: relative;
    background: -webkit-linear-gradient(top, transparent 29px, #cecece 30px),
      -webkit-linear-gradient(left, transparent 29px, #cecece 30px);
    background-size: 30px 30px;
    overflow: hidden;
    #flex-center(row, center);
    #color(background-color, --gray-module-bg-color);
  }
  .operation {
    width: 300px;
  }
  .test {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    .template {
      margin: 10px;
      overflow: hidden;
    }
    .template1 {
      box-sizing: border-box;
      padding-bottom: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      border: solid 1px #e7e7e7;
      border-radius: 12px;
    }
    .template2 {
      box-sizing: border-box;
      padding-left: 10px;
      border: solid 1px #e7e7e7;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .message {
        width: 120px;
        height: 120px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        .item {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>
